layui.use(['form', 'jquery', 'code', 'element','layer'], function (_data) {
    var form = layui.form;
    var $ = layui.jquery;
    var layer = layui.layer;
    var router = layui.router();
    const {keyUnid} = router.search;
    if(keyUnid){
        $("[name='keyUnid']").val(keyUnid);
    }


    function test(formData, fn) {
        let _url = "http://192.168.101.110:80/dev/Sys_WebService.nsf/ajax_Test?openAgent";
        $.ajax(_url, {
            type: "get",
            data: formData.field,
            dataType: "jsonp",
            jsonp: "jsonpCallback",
            jsonpCallback: 'showData',//跨域需要的回调函数
            success: function (res) {
                layer.closeAll('loading');
                fn && fn(res, _data);
            },
            error: function (res,) {
                console.log(res);
                layer.closeAll('loading');
            }
        });
    }

    //监听提交
    form.on('submit(formDemo)', function (data) {
        //加载层-默认风格
        layer.load();
        test(data, function (res) {
            layer.msg(res.message,{icon:res.code?2:1});
            var $o = $(data.elem).closest(".layui-card").find(".layui-code");
            $o.html(JSON.stringify(res));
            layui.code({
                title: 'JSON',
                elem: "#" + $o.attr("id"),
                about: false
            });
            let _data = data.field;
            if (_data.ApiType === "LoadFlowStepSoap") {
                $("[name='flowId']").val(res.flowId);
                $("[name='stepId']").val(res.stepId);
                $("[name='applyer']").val(_data.applyer);
                $("[name='creater']").val(_data.creater);
                $("[name='appKeyId']").val(_data.appKeyId);

                form.val("GetPathApproverSoapForm", {
                    actionUser: _data.actionUser,
                    keyUnid:_data.keyUnid
                })

                $("#outCode02").html("");
                $("#outCode03").html("");
            } else if (_data.ApiType === "GetPathApproverSoap") {
                let d = res.data[0], {approver} = d, arr = [];

                for (let a in approver) {
                    let {checked, id, isHas} = approver[a];
                    if (checked && isHas) {
                        arr.push(id);
                    }
                }
                form.val("SubmitFlowSoapForm", {
                    actionUser: _data.actionUser,
                    keyUnid:_data.keyUnid,
                    selectApprovers: arr.join(";"),
                    flowId: d.flowId,
                    stepId: d.stepId
                })
                $("#outCode03").html("");
                // $("[name='actionUser']").val(_data.actionUser);
            } else if (_data.ApiType === "SubmitFlowSoap") {
                const {approvalType,keyUnid,flowData} = res;
                if(flowData.length>0) {
                    const {id} = flowData[0].nextApproves[0];
                    $("[name='keyUnid']").val(keyUnid);
                    form.val("LoadFlowStepSoapForm", {
                        actionUser: id,
                    })

                    if (approvalType == 4) {
                        $("[name='subKeyUnid']").val(flowData[0].keyUnid);
                    }
                }

            }
        });
        return false;
    });


    //Select
    form.on('select(ProcessForm)', function(data){
        $(".card-Api").hide();
        $("#" + data.value).show();
    });

    function firstToUpper(str) {
        return str.replace(str[0], str[0].toLowerCase());
    }

    //监听审批数据中的提交
    form.on('submit(GetApproveProcess)', function (data) {
        //加载层-默认风格
        layer.load();
        // debugger;
        test(data, function (res) {
            var $o = $(data.elem).closest(".layui-card").find(".layui-code");
            $o.html(JSON.stringify(res));
            layui.code({
                title: 'JSON',
                elem: "#" + $o.attr("id"),
                about: false
            });
            layer.msg(res.message,{icon:res.code?2:1});
            let json = res.data[0];
            if (json) {
                let value, field;
                for (let f in json) {
                    field = firstToUpper(f);
                    value = json[f];
                    if (typeof (value) != "object") {
                        $("#" + field).html(value);
                        $("[name='" + field + "']").val(value);
                    }
                }
                const {Approver,IsReturned} = json;

                if(IsReturned == "1") {
                    let st = $("#stepTitle");
                    st.html(st.text() + "<span style='color:red'> [退回]</span>");
                }
                form.val("LoadFlowStepSoapForm", {
                    actionUser: Approver.split(",")[0],
                })
            }else{
                $("span.layui-form-mid").html("");
            }

        });
        return false;
    });
    form.on('submit(GetOpinionsSoap)', function (fdata) {
        //加载层-默认风格
        layer.load();
        // debugger;
        test(fdata, function (res) {
            var $o = $(fdata.elem).closest(".layui-card").find(".layui-code");
            $o.html(JSON.stringify(res));
            layui.code({
                title: 'JSON',
                elem: "#" + $o.attr("id"),
                about: false
            });
            layer.msg(res.message,{icon:res.code?2:1});
            const {data} = res;
            let ul = '<ul class="layui-timeline">',li = "";
            for(let d in data){
                let {ActionTypeTitle,ApproverName,EndTime,Options,StepName} = data[d];
                li += '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                li += `<div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">${EndTime}</h3>`

                li += `<p>${ApproverName}&nbsp;【${StepName}】 &nbsp;<span style="color:red">${ActionTypeTitle}</span><br>`;
                li += (Options || "");
                li += "</p></div></li>"
            }
            ul += li + "</ul>";
            $("#OpinionsShow").html(ul);

        });
        return false;
    });


    form.on('submit(GetFlowApproveLogSoap)', function (fdata) {
        //加载层-默认风格
        layer.load();
        // debugger;
        test(fdata, function (res) {
            var $o = $(fdata.elem).closest(".layui-card").find(".layui-code");
            $o.html(JSON.stringify(res));
            layui.code({
                title: 'JSON',
                elem: "#" + $o.attr("id"),
                about: false
            });
            layer.msg(res.message,{icon:res.code?2:1});

            const {data} = res;
            let ul = '<ul class="layui-timeline">',li = "";
            for(let d in data){
                let {ActionTypeTitle,ApprovDesc,ApproverName,EndTime,StartTime} = data[d];
                li += '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                li += `<div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">${ApprovDesc}</h3>`

                li += `<p>办理人：${ApproverName} &nbsp;<span style="color:red">${ActionTypeTitle}</span>&nbsp;<br>`;
                li += `时间：${StartTime} - ${EndTime}`;

                li += "</p></div></li>"
            }
            ul += li + "</ul>";
            $("#FlowApproveLogShow").html(ul);

        });
        return false;
    });
});